<template>
    <div id="app">
        <!-- <div id="nav">
            <router-link to="/">Home</router-link> |
            <router-link to="/about">About</router-link>
        </div> -->
        <el-container>
            <el-aside width="200px">
                <el-menu default-active="/" class="el-menu-vertical-demo" router>
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>导航</span>
                        </template>
                        <!-- <el-menu-item index="/">Home</el-menu-item>
                        <el-menu-item index="/about">About</el-menu-item> -->
                        <el-menu-item v-for="item in navList" :index="item.path" :key="item.path">{{
                            item.name
                        }}</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view />
            </el-main>
        </el-container>
    </div>
</template>
<script>
export default {
    data() {
        return {
            navList: [
                { path: '/', name: 'Home' },
                { path: '/about', name: 'About' },
            ],
        };
    },
};
</script>

<style lang="scss">
#nav {
    padding: 30px;
    a {
        font-weight: bold;
        color: #2c3e50;

        &.router-link-exact-active {
            color: #42b983;
        }
    }
}
</style>
